src/app/groups/[groupId]/balances-list.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

import { Balances } from '@/lib/balances'
import { cn } from '@/lib/utils'
import { Participant } from '@prisma/client'

type Props = {
  balances: Balances
  participants: Participant[]
  currency: string
}

export function BalancesList({ balances, participants, currency }: Props) {
  const maxBalance = Math.max(
    ...Object.values(balances).map((b) => Math.abs(b.total)),
  )

  return (
    <div className="text-sm">
      {participants.map((participant) => (
        <div
          key={participant.id}
          className={cn(
            'flex',
            balances[participant.id]?.total > 0 || 'flex-row-reverse',
          )}
        >
          <div
            className={cn(
              'w-1/2 p-2',
              balances[participant.id]?.total > 0 && 'text-right',
            )}
          >
            {participant.name}
          </div>
          <div
            className={cn(
              'w-1/2 relative',
              balances[participant.id]?.total > 0 || 'text-right',
            )}
          >
            <div className="absolute inset-0 p-2 z-20">
              {currency} {(balances[participant.id]?.total ?? 0).toFixed(2)}
            </div>
            <div
              className={cn(
                'absolute top-1 h-7 z-10',
                balances[participant.id]?.total > 0
                  ? 'bg-green-200 left-0 rounded-r-lg border border-green-300'
                  : 'bg-red-200 right-0 rounded-l-lg border  border-red-300',
              )}
              style={{
                width:
                  (Math.abs(balances[participant.id]?.total ?? 0) /
                    maxBalance) *
                    100 +
                  '%',
              }}
            ></div>
          </div>
        </div>
      ))}
    </div>
  )
}